<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import IconMinusOutlined from './icons/IconMinusOutlined.vue'
import IconPlusOutlined from './icons/IconPlusOutlined.vue'
import IconLeftOutlined from './icons/IconLeftOutlined.vue'
import IconRightOutlined from './icons/IconRightOutlined.vue'

const appStore = useAppStore()

type TLotteryNumberProps = {
  enableSwitchMethod?: boolean
}

defineProps<TLotteryNumberProps>()
</script>

<template>
  <div class="flex flex-col justify-center mb-32">
    <div class="px-4 flex justify-center items-center bg-black/45 text-white">
      <template v-if="enableSwitchMethod">
        <IconLeftOutlined class="mr-2 text-white" />
        <span class="text-xs text-white">巨幕</span>
        <IconRightOutlined class="mx-2 text-white" />
      </template>
      <span class="text-xs">一次抽取</span>
      <button class="w-10 h-10 mx-2" @click.stop="appStore.decrement">
        <IconMinusOutlined />
      </button>
      <span>{{ appStore.currentLottery.getNumberOfDraws() }}</span>
      <button class="w-10 h-10 mx-2" @click.stop="appStore.increment">
        <IconPlusOutlined />
      </button>
      <span class="text-xs">人</span>
    </div>
    <div class="flex justify-center mt-4">
      <button class="px-4 py-1 rounded bg-yellow-600 hover:bg-yellow-400 active:bg-yellow-600">
        <span class="font-semibold text-sm text-red-800" @click.stop="appStore.draw">开始抽奖</span>
      </button>
    </div>
  </div>
</template>
